<%= turbo_frame_tag :login do %>
  <div class="card-dialog max-w-xl mx-auto py-10 px-4">
    <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:login) %></h2>
    <%= form_for(resource, as: resource_name, url: spree_login_path, data: { turbo: false }) do |f| %>
      <div class="flex flex-col mb-4">
        <%= f.label :email, Spree.t(:email) %>
        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'text-input', required: true %>
      </div>
      <div class="flex flex-col mb-4">
        <%= f.label :password, Spree.t(:password) %>
        <%= f.password_field :password, autocomplete: "current-password", class: 'text-input', required: true %>
      </div>
      <% if devise_mapping.rememberable? %>
        <div class="flex items-center gap-2 text-sm mb-4">
          <%= f.check_box :remember_me, class: 'input-checkbox' %>
          <%= f.label :remember_me, Spree.t(:remember_me), class: 'cursor-pointer select-none' %>
        </div>
      <% end %>
      <div class="actions">
        <%= f.submit Spree.t(:login), class: 'btn btn-primary w-full', id: 'login-button' %>
      </div>
    <% end %>
    <%= render "devise/shared/links" %>

    <% if current_order.present? &&
          current_store&.prefers_guest_checkout? &&
          stored_location&.include?(spree.checkout_path(current_order.token))
    %>
      <div class="relative my-5 flex items-center">
        <div class="flex-grow border-t border-gray-200"></div>
        <span class="mx-4 text-sm text-gray-500 uppercase"><%= Spree.t(:or) %></span>
        <div class="flex-grow border-t border-gray-200"></div>
      </div>

      <div class="flex flex-col items-center gap-4">
        <p class="text-sm text-gray-600"><%= Spree.t(:continue_without_logging_in) %></p>
        <%= link_to Spree.t(:continue_as_guest), spree.checkout_path(current_order.token, guest: true), class: 'btn btn-secondary w-full max-w-sm', data: { turbo: false } %>
      </div>
    <% end %>
  </div>
<% end %>
